<template>
	<div class="app-container">
		<div v-if="is_Itshow" class="container-bg">
			<div class="overview-title">
				<div class="circle"></div>
				<span class="title-label">业务步骤IT路径图</span>
			</div>
			<yd-it-road
				v-if="is_Itshow"
				ref="ydItRoad"
				v-loading="e2eRelationConfig.loading"
				:config="{ type: 'StepEndToEndRelation', canvasHeight: 400, noDataFlag: false, customOptions: e2eRelationConfig.customOptions }"
				@dblclickNode="dblclickNodeHandler"
				@dragNode="updateSegmentPos"
			></yd-it-road>
		</div>

		<div v-if="is_Itshow" class="container-bg">
			<div class="overview-title">
				<div class="circle"></div>
				<span class="title-label">节点信息</span>
			</div>
			<YdTable
				ref="busiStepTableRef1"
				:formData="e2eDetail.formData"
				:tableConfig="e2eDetail.tableConfig"
				:tableData="e2eDetail.tableData"
				@sizeChangeHandler="searchNodeInfo"
				@currentChangeHandler="searchNodeInfo"
				@sortChangeHandler="searchNodeInfo"
				@expandRowHandler="expandRowHandler1"
			>
				<!-- 告警数展开列表 -->
				<template #expand="props">
					<YdTable
						:formData="alarmFormData1"
						:tableConfig="alarmTableConfig1"
						:tableData="alarmTableData1[props.data.id]"
						@sortChangeHandler="searchDetailHandler1"
					></YdTable>
				</template>
			</YdTable>
		</div>
	</div>
</template>
<script setup name="stepDetail" lang="ts">
import { onActivated, onMounted, computed, ref, reactive, getCurrentInstance, withDefaults } from 'vue';

import { useRoute } from 'vue-router';
import {
	queryBusinessDetailByDetailId,
	queryBusinessStepListPage,
	stepEndToEndRelation,
	queryEndToEndDetail,
	updateSegmentPosition,
} from '@/api/bpm/business/business_detail';
import { getConfigKey } from '@/api/management/systemManage/systemConfig';
import { getBaseAlarmList } from '@/api/bpm/alarm/busi_detail_alarm';
import YdItRoad from '@/components/YdItRoad/index.vue';
import YdTable from '@/components/YdTable/index.vue';
import { toDecimalFormate, parseTime, getLastNodeArr, simulateFormSubmit } from '@/utils/common';
// import TitleBanner from "@/views/ywgzt/components/TitleBanner/index";
import { GraphData } from '@/components/YdItRoad/itRoad-type';

// const props = withDefaults(defineProps<{ [key: string]: any }>(), {
// 	params: '',
// });
const instance = getCurrentInstance();
const proxy = instance?.proxy;

const route = useRoute();

const formatDealTime = computed(() => {
	return toDecimalFormate(businessDetailData.dealTime, 'wm');
});
const formatServerResponseTime = computed(() => {
	return toDecimalFormate(businessDetailData.serverResponseTime, 'wm');
});
const formatNetTranslateTime = computed(() => {
	return toDecimalFormate(parseInt(businessDetailData.clientTranslateTime) + parseInt(businessDetailData.serverTranslateTime), 'wm');
});
const formatClientFreeTime = computed(() => {
	return toDecimalFormate(businessDetailData.clientFreeTime, 'wm');
});
// refs
const ydItRoad = ref<InstanceType<typeof YdItRoad>>();
const busiStepTableRef1 = ref<InstanceType<typeof YdTable>>();

// 搜索表单数据
const is_Itshow = ref(true);
let formData = reactive<FormModelType>({
	pageNum: 1,
	pageSize: 10,
});

// 告警数展开列表表单数据
const alarmFormData1 = reactive<FormModelType>({
	systemId: null,
	relvanceDataId: '',
	startTime: '',
	endTime: '',
});
// 告警数展开列表配置
const alarmTableConfig1 = reactive<TableConfigType>({
	columns: [
		{
			label: '告警对象',
			prop: 'alarmObject',
			align: 'center',
			width: 320,
		},
		{
			label: '告警级别',
			prop: 'alarmLevelName',
			align: 'center',
			width: 90,
		},
		{
			label: '告警现象',
			prop: 'alarmContext',
			align: 'center',
			width: 380,
		},
		{
			label: '告警类型',
			prop: 'alarmIndicatorName',
			align: 'center',
			width: 120,
		},
		{
			label: '返回码',
			prop: 'alarmResultCode',
			align: 'center',
			width: 80,
		},
		{
			label: '告警时间',
			prop: 'alarmTriggerTime',
			align: 'center',
			sortable: true,
			width: 170,
		},
		{
			label: '专属指标',
			prop: 'exclusiveIndicator',
			align: 'center',
		},
	],
	pagination: {
		pageNum: 1,
	},
	loading: true,
	noDataText: '暂无告警数据',
});
// 告警数展开列表数据
const alarmTableData1 = reactive({
	data: [],
	total: 0,
});
// 告警数展开列表对应的步骤id
const tempSysProcessId = ref('');
// 业务详单数据
const businessDetailData = reactive({
	// 详单编号
	docId: '',
	// 系统名称
	systemName: '',
	// 业务名称
	businessName: '',
	// 开始时间
	startTime: '',
	// 结束时间
	endTime: '',
	// 办理时长
	dealTime: '',
	// 响应时长
	serverResponseTime: '',
	// 客户端传输时长
	clientTranslateTime: '',
	// 服务端传输时长
	serverTranslateTime: '',
	// 客户端空闲时长
	clientFreeTime: '',
	// 专属指标
	exclusiveIndicator: '',
});
// 端到端关联图配置
const e2eRelationConfig: anyObj = reactive({
	loading: false,
	mode: 'default',
	preRelvanceId: undefined,
	firstLoad: true,
	customOptions: {
		maxZoom: 1.5,
		layout: {
			type: 'dagre',
			rankdir: 'LR',
			nodesep: 60,
			ranksep: 110,
		},
		// 默认模式
		defaultMode: [
			// 节点高亮(自定义)
			'activate-node',
		],
		// 工具按钮
		toolbarObj: {
			getContent: () => {
				const outDiv = document.createElement('div');
				outDiv.style.width = '120px';
				outDiv.innerHTML = `<ul>
                    <li code="edit"><i id="iconEditId" class="el-icon-edit-outline"></i></li>
                  </ul>`;
				return outDiv;
			},
			handleClick: (code: string) => {
				if (code === 'edit') {
					if (e2eRelationConfig.mode === 'default') {
						e2eRelationConfig.mode = 'edit';
						document.getElementById('iconEditId')!.style.color = '#2beded';
					} else {
						e2eRelationConfig.mode = 'default';
						document.getElementById('iconEditId')!.style.color = '#ffffff';
					}
					ydItRoad.value?.setGraphMode(e2eRelationConfig.mode);
				}
			},
		},
	},
});
// 端到端节点详情
const e2eDetail: anyObj = reactive({
	// 搜索表单数据
	formData: {
		pageNum: 1,
		pageSize: 10,
	},
	// 列表配置
	tableConfig: {
		url: queryEndToEndDetail,
		columns: [
			{
				label: '业务资源',
				prop: 'resource',
			},
			{
				label: '请求IP端口',
				prop: '',
				width: 160,
				formatter(row: any) {
					return row.requestIp + ':' + row.requestPort;
				},
			},
			{
				label: '响应IP端口',
				prop: '',
				width: 160,
				formatter(row: any) {
					return row.responseIp + ':' + row.responsePort;
				},
			},
			{
				label: '系统返回码',
				prop: 'serverResCode',
				width: 90,
			},
			{
				label: '业务状态',
				prop: 'dealState',
				width: 80,
				formatter(_row: any, val: any) {
					if (val === 1) {
						return '成功';
					}
					return '失败';
				},
			},
			{
				label: '响应时长',
				prop: 'serverResponseTime',
				width: 90,
				formatter(_row: any, val: any) {
					return toDecimalFormate(val, 'wm');
				},
			},
			{
				label: '请求开始时间',
				prop: 'startTime',
			},
			{
				label: '响应结束时间',
				prop: 'endTime',
			},
			{
				label: '处理时长',
				prop: 'dealTime',
				width: 90,
				formatter(_row: any, val: any) {
					return toDecimalFormate(val, 'wm');
				},
			},
			{
				label: '请求大小',
				prop: 'requestBytes',
				formatter(_row: any, val: any) {
					return formatByteData(val);
				},
			},
			{
				label: '响应大小',
				prop: 'responseBytes',
				formatter(_row: any, val: any) {
					return formatByteData(val);
				},
			},
			{
				label: '客户端网络传输时长',
				prop: 'clientTranslateTime',
				width: 90,
				formatter(_row: any, val: any) {
					return toDecimalFormate(val, 'wm');
				},
			},
			{
				label: '服务端网络传输时长',
				prop: 'serverTranslateTime',
				width: 90,
				formatter(_row: any, val: any) {
					return toDecimalFormate(val, 'wm');
				},
			},
			{
				label: '告警量',
				prop: 'alarmCount',
				width: 80,
				operation: [
					{
						text: undefined,
						rowKey: 'alarmCount',
						handler: (scope: any) => handleClickAlarm1(scope.row),
					},
				],
			},
			{
				label: '专属指标',
				prop: 'exclusiveIndicator',
			},
			{
				label: '操作',
				prop: '',
				operation: [
					{
						text: '提包分析',
						handler: (scope: any) => {
							handlePackageAnalysis(scope.row, 1);
						},
					},
					{
						text: '数据包下载',
						handler: (scope: any) => {
							handlePackageAnalysis(scope.row, 2);
						},
					},
				],
				width: 170,
				hide: false,
			},
		],
		pagination: true,
		loading: true,
		expandHide: true,
		alarmType: true,
	},
	// 列表数据
	tableData: {
		data: [],
		total: 0,
	},
});
// 系统id
const tempSystemId = ref(undefined);
// 当前选中端首端标识(默认首端)
const currentHeaderFlag = ref(1);

// 是否展示提包分析相关按钮
const showTibao = ref(false);
onMounted(() => {
	getConfigKey('apm.datapacket.analysis.button.show').then((res: ApiResponse) => {
		// showTibao.value = res.data === 'true' ? true : false;
		// e2eDetail.tableConfig.columns.find((col) => col.label === '操作').hide = !showTibao.value;
	});
	// formData = props.params;
	renderEndToEndRelation();
});
onActivated(() => {
	console.log('activate');
});
function formatByteData(data: any) {
	if (Number(data) > 1024 * 1024) {
		return (data / 1024 / 1024).toFixed(2) + 'MB';
	}
	if (Number(data) > 1024) {
		return (data / 1024).toFixed(2) + 'KB';
	}
	return data + 'B';
}

function handleClickAlarm1(row: any) {
	busiStepTableRef1.value?.getTableRef().toggleRowExpansion(row);
}
function expandRowHandler1(row: any) {
	tempSysProcessId.value = row.id;
	alarmFormData1.relvanceDataId = row.idStr;
	alarmFormData1.systemId = 1;
	alarmFormData1.startTime = parseTime(row.startTime, '{y}-{m}-{d} {h}:{i}') + ':00';
	alarmFormData1.endTime = parseTime(row.endTime, '{y}-{m}-{d} {h}:{i}') + ':00';
	searchDetailHandler1();
}

// 获取告警数列表数据
function searchDetailHandler1() {
	const req = {
		alarmIndicatorIds: [],
		alarmLevelIds: [],
		alarmStates: [],
		businessCodes: [],
		category: 'BPM',
		endTime: alarmFormData1.endTime,
		headerFlag: currentHeaderFlag.value,
		pageNum: 1,
		pageSize: 999,
		relvanceDataId: alarmFormData1.relvanceDataId,
		segmentIds: [],
		startTime: alarmFormData1.startTime,
		stepCodes: [],
		systemId: tempSystemId.value,
	};

	alarmTableConfig1.loading = true;
	getBaseAlarmList(req).then((res: ApiResponse) => {
		alarmTableConfig1.loading = false;
		if (res.code !== 200) {
			return;
		}
		// $set(alarmTableData1, tempSysProcessId.value, {
		// 	data: res.result.data,
		// 	total: res.result.total,
		// });
	});
}

// function reloadList(e) {
// 	formData = e;
// 	renderEndToEndRelation();
// }
// 渲染端到端关联图
function renderEndToEndRelation() {
	/* eslint-disable */
	var o = formData;
	// o.detailId =

	stepEndToEndRelation(o).then((res: ApiResponse) => {
		e2eRelationConfig.loading = false;
		// 清除画布
		ydItRoad.value?.graph.clear();
		if (res.code !== 200) {
			// 接口异常
			return;
		}
		e2eRelationConfig.preRelvanceId = o.preRelvanceId;
		e2eRelationConfig.startTimeUsec = o.startTimeUsec;
		e2eRelationConfig.endTimeUsec = o.endTimeUsec;
		const d: GraphData = {
			nodes: [],
			edges: [],
		};
		const showVoList = res.data;
		if (showVoList.length <= 0) {
			// 无数据
			return;
		}
		let isSavePos = true;
		// 将布局方式还原为默认
		ydItRoad.value?.setLayout(e2eRelationConfig.customOptions.layout);
		// 临时节点数组
		const tempNodes = [];
		// 不进行展示的端id数组
		const noShowIdList = [];
		for (const showVo of showVoList) {
			const detailList = showVo.segmentDetailVoList;
			for (const detail of detailList) {
				if (detail.locationX != undefined && detail.locationY != undefined) {
					// 采用自定义布局
					isSavePos = false;
					ydItRoad.value?.setLayout({
						type: 'stepEndToEndRelationLayout',
					});
				}
				if (detail.dealCount === -1 || !detail.ipPort) {
					// 无数据的端，不进行展示
					noShowIdList.push(detail.segmentId);
					continue;
				}
				// 设置指标名称文本和值文本
				let indicatorText = '',
					indicatorValText = '';
				// 最后一端的指标名称文本和值文本
				let lastIndicatorText = '',
					lastIndicatorValText = '';
				if (detail.segmentId === 0) {
					// 客户端
					indicatorText += 'IP端口\n';
					indicatorValText += detail.ipPort + '\n';
					if (detail.requestMac !== null && detail.requestMac !== '') {
						indicatorText += 'Mac\n';
						indicatorValText += detail.requestMac + '\n';
					}
					indicatorText += '请求开始时间\n响应结束时间\n后端处理时长\n状态';
					indicatorValText += detail.startTime + '\n' + detail.endTime + '\n' + toDecimalFormate(detail.dealTime, 'wm') + '\n' + detail.state;
				} else if (detail.oneFlag === 1 || detail.headerFlag === 1) {
					// 首端
					indicatorText += 'IP端口\n';
					indicatorValText += detail.ipPort + '\n';
					if (detail.responseMac !== null && detail.responseMac !== '') {
						indicatorText += 'Mac\n';
						indicatorValText += detail.responseMac + '\n';
					}
					if (detail.serverResponseStartTime !== null && detail.serverResponseStartTime !== '') {
						indicatorText += '服务器响应开始时间\n';
						indicatorValText += detail.serverResponseStartTime + '\n';
					}
					lastIndicatorText += indicatorText;
					lastIndicatorValText += indicatorValText;

					// 最后一端才有请求后端开始时间、后端响应结束时间、后端处理时长
					if (detail.startTime !== null && detail.startTime !== '') {
						indicatorText += '请求后端开始时间\n';
						indicatorValText += detail.startTime + '\n';
					}
					if (detail.endTime !== null && detail.endTime !== '') {
						indicatorText += '后端响应结束时间\n';
						indicatorValText += detail.endTime + '\n';
					}
					if (detail.dealTime !== null) {
						indicatorText += '后端处理时长\n';
						indicatorValText += toDecimalFormate(detail.dealTime, 'wm') + '\n';
					}
					if (detail.serverResponseEndTime !== null && detail.serverResponseEndTime !== '') {
						indicatorText += '服务器响应结束时间\n';
						indicatorValText += detail.serverResponseEndTime + '\n';
						lastIndicatorText += '服务器响应结束时间\n';
						lastIndicatorValText += detail.serverResponseEndTime + '\n';
					}
					if (detail.serverResponseTime !== null) {
						indicatorText += '服务器响应时长\n';
						indicatorValText += toDecimalFormate(detail.serverResponseTime, 'wm') + '\n';
						lastIndicatorText += '服务器响应时长\n';
						lastIndicatorValText += toDecimalFormate(detail.serverResponseTime, 'wm') + '\n';
					}
					indicatorText += '状态';
					indicatorValText += detail.state;
					lastIndicatorText += '状态';
					lastIndicatorValText += detail.state;
				} else if (detail.startTime !== null && detail.startTime !== '') {
					indicatorText += '服务器响应开始时间\n';
					indicatorValText += detail.serverResponseStartTime + '\n';
					lastIndicatorText += indicatorText;
					lastIndicatorValText += indicatorValText;
					// 最后一端才有请求后端开始时间、后端响应结束时间、后端处理时长
					indicatorText += '请求后端开始时间\n后端响应结束时间\n后端处理时长\n';
					indicatorValText += detail.startTime + '\n' + detail.endTime + '\n' + toDecimalFormate(detail.dealTime, 'wm') + '\n';
					indicatorText += '服务器响应结束时间\n响应时长\n健康度\n状态';
					indicatorValText +=
						detail.serverResponseEndTime +
						'\n' +
						toDecimalFormate(detail.serverResponseTime, 'wm') +
						'\n' +
						(detail.successRate === null ? '' : detail.successRate + '%') +
						'\n' +
						detail.state;
					lastIndicatorText += '服务器响应结束时间\n响应时长\n健康度\n状态';
					lastIndicatorValText +=
						detail.serverResponseEndTime +
						'\n' +
						toDecimalFormate(detail.serverResponseTime, 'wm') +
						'\n' +
						(detail.successRate === null ? '' : detail.successRate + '%') +
						'\n' +
						detail.state;
				} else {
					indicatorText += '服务器响应开始时间\n服务器响应结束时间\n响应时长\n健康度\n状态';
					indicatorValText +=
						detail.serverResponseStartTime +
						'\n' +
						detail.serverResponseEndTime +
						'\n' +
						toDecimalFormate(detail.serverResponseTime, 'wm') +
						'\n' +
						(detail.successRate === null ? '' : detail.successRate + '%') +
						'\n' +
						detail.state;
				}
				d.nodes.push({
					id: detail.segmentId + '',
					segmentName: detail.segmentName,
					status: getNodeStatus(detail.state, detail.successRate),
					x: detail.locationX,
					y: detail.locationY,
					info: JSON.parse(JSON.stringify(detail)),
					indicatorText: indicatorText,
					indicatorValText: indicatorValText,
					lastIndicatorText: lastIndicatorText,
					lastIndicatorValText: lastIndicatorValText,
				});
				tempNodes.push(detail);
			}
		}
		const preIdList = showVoList[0].perSegmentIdList;
		const afterIdList = showVoList[0].afterSegmentIdList;
		let lastNodeId = undefined;
		for (let i = 0; i < preIdList.length; i++) {
			// 只连接有数据的端
			if (noShowIdList.indexOf(preIdList[i]) === -1 && noShowIdList.indexOf(afterIdList[i]) === -1) {
				const preArr = tempNodes.filter((n) => n.segmentId === preIdList[i]);
				const afterArr = tempNodes.filter((n) => n.segmentId === afterIdList[i]);
				let preNode, afterNode;
				if (preArr.length > 0 && afterArr.length > 0) {
					preNode = preArr[0];
					afterNode = afterArr[0];
				}
				if (preNode !== undefined && afterNode !== undefined) {
					const clientTransTime = afterNode.clientTransTime == null ? '' : afterNode.clientTransTime + 'ms';
					const serverTransTime = afterNode.serverTransTime == null ? '' : afterNode.serverTransTime + 'ms';
					lastNodeId = afterNode.segmentId + '';
					d.edges.push({
						source: preNode.segmentId + '',
						target: afterNode.segmentId + '',
						sourceAnchor: 2,
						targetAnchor: 0,
						label: clientTransTime,
						labelCfg: {
							refY: 10,
							style: {
								fill: '#ffffff',
							},
						},
					});
					d.edges.push({
						source: afterNode.segmentId + '',
						target: preNode.segmentId + '',
						sourceAnchor: 1,
						targetAnchor: 3,
						label: serverTransTime,
						labelCfg: {
							refY: -10,
							style: {
								fill: '#ffffff',
							},
						},
					});
				}
			}
		}
		// 去掉最后一端的请求后端开始时间、后端响应结束时间、后端处理时长
		// const lastNodeArr = d.nodes.filter((n) => n.id === lastNodeId);
		let lastNodeArr = getLastNodeArr(d.edges, d.nodes);
		if (lastNodeArr.length > 0) {
			lastNodeArr[0].indicatorText = lastNodeArr[0].lastIndicatorText;
			lastNodeArr[0].indicatorValText = lastNodeArr[0].lastIndicatorValText;
		}
		// 渲染关联图
		ydItRoad.value?.loadItRoadData(d);
		// 判断是否保存端位置
		if (isSavePos) {
			const nodes = ydItRoad.value?.getAllNodes();
			nodes.forEach((node: any) => {
				const model = node.getModel();
				updateSegmentPos(null, {
					segmentId: model.id,
					locationX: model.x,
					locationY: model.y,
				});
			});
		}
		// 默认展示第一个节点信息
		if (d.nodes.length > 0) {
			// 默认当前选中端首端标识为1
			currentHeaderFlag.value = 1;
			e2eDetail.formData = {
				...e2eDetail.formData,
				dataType: d.nodes[0].info.dataType,
				dataId: d.nodes[0].info.dataId,
				codeList: d.nodes[0].info.resourceCodes,
				startTimeUsec: e2eRelationConfig.startTimeUsec,
				endTimeUsec: e2eRelationConfig.endTimeUsec,
			};
			searchNodeInfo();
			ydItRoad.value?.setItemStateById(d.nodes[0].id, 'selected', true);
		}
	});
}
// 获取节点状态
function getNodeStatus(state: string, successRate: any) {
	if (state === '成功') {
		// normal
		return 1;
	} else if (state === '失败') {
		// danger
		return 3;
	} else if (successRate >= 90) {
		// normal
		return 1;
	} else if (successRate >= 70 && successRate < 90) {
		// alarm
		return 2;
	} else if (successRate >= 0 && successRate < 70) {
		// danger
		return 3;
	} else {
		// no-data
		return 0;
	}
}
// 双击端展示详情信息
function dblclickNodeHandler(ev: any) {
	const model = ev.item.getModel();
	if (model.info.segmentId == 0 || model.info.headerFlag == 1) {
		// 客户端或首端
		currentHeaderFlag.value = 1;
	} else {
		// 非客户端、非首端
		currentHeaderFlag.value = 0;
	}

	e2eDetail.formData = {
		...e2eDetail.formData,
		dataType: model.info.dataType,
		dataId: model.info.dataId,
		codeList: model.info.resourceCodes,
		startTimeUsec: e2eRelationConfig.startTimeUsec,
		endTimeUsec: e2eRelationConfig.endTimeUsec,
	};
	searchNodeInfo();
}
// 查询节点详情信息
function searchNodeInfo() {
	e2eDetail.tableConfig.loading = true;
	queryEndToEndDetail(e2eDetail.formData).then((res: ApiResponse) => {
		e2eDetail.tableConfig.loading = false;
		if (res.code !== 200) {
			return;
		}
		e2eDetail.tableData = res.data;
		e2eDetail.tableData.data.forEach((ov: any) => {
			// $set(alarmTableData1, ov.id, {
			// 	data: [],
			// 	total: 0,
			// });
		});
	});
}
// 拖拽端更新坐标
function updateSegmentPos(ev: any, model: any) {
	// 编辑模式启动情况下才更新网端位置
	if (e2eRelationConfig.mode === 'edit' || model) {
		const segmentPos = model || {
			segmentId: ev.item.getModel().id,
			locationX: ev.item.getModel().x,
			locationY: ev.item.getModel().y,
		};
		const dId = e2eRelationConfig.preRelvanceId;
		segmentPos.systemId = dId.substring(0, 4) + dId.substring(dId.length - 5);
		if (segmentPos.locationX) {
			updateSegmentPosition(segmentPos).then((res) => {});
		}
	}
}

// 提包分析
function handlePackageAnalysis(item: any, btnFlag: any) {
	const probeArr = item.probeIp.split(':');
	const tcpOrUdpStr = item.requestIp + ':' + item.requestPort + '_' + item.responseIp + ':' + item.responsePort;
	const userName = btoa('admin');
	const password = btoa('1qazxsw2!@');
	const startTime = parseTime(new Date(item.startTime).getTime() - 1000, '{y}-{m}-{d} {h}:{i}:{s}');
	const endTime = parseTime(new Date(item.endTime).getTime() + 1000, '{y}-{m}-{d} {h}:{i}:{s}');
	getConfigKey('apm.datapacket.analysis').then((res) => {
		const ipPort = res.result;
		if (ipPort) {
			let url = '';
			if (btnFlag === 2) {
				url = 'http://' + ipPort + '/yd-apm-web/api/downloadPacket/downloadStart.action';
			} else {
				url = 'http://' + ipPort + '/yd-apm-web/api/pktAnalysisController/pktAnalysis.action';
			}
			const qparams = [
				{ name: 'name', value: userName },
				{ name: 'password', value: password },
				{ name: 'beginTime', value: startTime },
				{ name: 'endTime', value: endTime },
				{ name: 'filterType', value: 3 },
				{ name: 'tcpOrUdpList[0].probeIp', value: probeArr[0] },
				{ name: 'tcpOrUdpList[0].probeNum', value: probeArr[1] },
				{ name: 'tcpOrUdpList[0].TcpOrUdpStr', value: tcpOrUdpStr },
			];
			simulateFormSubmit(url, qparams, '1', 'get');
		} else {
			proxy.$message.warning('请前往参数配置页面配置提包分析服务器地址');
		}
	});
}
</script>
<style rel="stylesheet/scss" lang="scss">
// @import "~@/styles/ywgzt/common.scss";
// @import "~@/styles/ywgzt/yd-table.scss";
</style>
<style rel="stylesheet/scss" lang="scss">
.business-detail-container {
	margin: 10px;

	.el-loading-mask {
		background-color: rgba(255, 255, 255, 0.3);
	}
	.el-card__body {
		padding: 15px 20px 35px 20px;
	}
}

.overview-label {
	color: #2beded;
}

.overview-text {
	color: #ffffff;
}

.circle {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 8px;
	margin-right: 8px;
	background-color: #2beded;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}
.container-bg {
	position: relative;
	background-color: rgba(29, 39, 75, 0.31);
	border-radius: 12px;
	margin-top: 10px;
	width: 100%;
}
.overview-title {
	padding-top: 16px;
	width: 100%;
	display: flex;
	align-items: center;
	.title-label {
		color: #ffffff;
		font-size: 16px;
		font-weight: bold;
	}
}
.overview-box {
	background-color: rgb(42, 80, 125);
	width: 100%;
	padding-bottom: 10px;

	border: 2px solid #2beded;
	.overview-title {
		padding-top: 0;
		height: 48px;
	}
	.overview-row {
		width: 100%;
		margin-left: 20px;
		.overview-label {
			font-size: 14px;
			color: #2beded;
			margin-bottom: 6px;
			float: left;
		}
		.overview-text {
			font-size: 14px;
			color: #ffffff;
		}
	}
}
.chart-box {
	height: 300px;
	width: 100%;
}
</style>
